<template>
    <div class="phoneKey">
        <!-- 顶部状态栏 -->
        <div class="top">
            <!-- <van-icon name="arrow-left" size="20px" @click="goback()" /> -->
            <div>录入信息</div>
        </div>
        <div class="xiala">
            <div class="left">城市</div>
            <div class="right" style="text-align: center;">黄冈市</div>
        </div>
        <div class="xiala">
            <div class="left">小区名称</div>
            <van-dropdown-menu :z-index="index">
                <van-dropdown-item @change="changeCommit" v-model="comm_id" :ref="xq_id" @click="dianji()"
                    :options="option2" />
            </van-dropdown-menu>
        </div>

        <div class="xiala">
            <div class="left">楼栋单元</div>
            <div class="right" @click="openshowPicker" style="text-align: center;height: 40px;" :value="num1+num2+num3">
                {{num1+num2+num3}}</div>

        </div>
        <div class="xiala">
            <div class="left">与户主关系</div>
            <van-dropdown-menu :z-index="index">
                <van-dropdown-item v-model="value3" :options="option3" />
            </van-dropdown-menu>
        </div>
        <div class="xiala">
            <div class="left">工作单位</div>
            <van-field v-model="job" input-align="center" placeholder="请输入工作单位" />

        </div>



        <van-popup v-model="showPicker" position="bottom">
            <div class="xuanze">
                <van-picker :columns="columns1" show-toolbar confirm-button-text=" " cancel-button-text=" " title="楼栋号"
                    @change="onChange1" />
                <van-picker :columns="columns2" show-toolbar confirm-button-text=" " cancel-button-text=" " title="单元号"
                    @change="onChange2" />
                <van-picker :columns="columns3" show-toolbar confirm-button-text=" " cancel-button-text=" " title="房间号"
                    @change="onChange3" />
            </div>
        </van-popup>



        <!-- 录入人脸 -->
        <van-divider>录入人脸信息</van-divider>

        <div class="idcard">
            <div style="text-align: center; margin-bottom: .4rem;">
                <img class="img" url="url1" :src="url1" alt="">
                <p> 正面照片</p>
                <input type="file" id="upload" url="url1" accept="image/*" @change="upload">
                <img class="add" :src="url5" v-show="url5" alt="">
            </div>
            <div style="text-align: center; margin-bottom: .4rem;">
                <img class="img" url="url2" :src="url2" alt="">
                <p>头往上抬一点</p>
                <input type="file" id="upload" url="url2" accept="image/*" @change="upload">
                <img class="add" :src="url6" v-show="url6" alt="">
            </div>
            <div style="text-align: center; margin-bottom: .4rem;">
                <img class="img" url="url3" :src="url3" alt="">
                <p>头往左倾一点</p>
                <input type="file" id="upload" url="url3" accept="image/*" @change="upload">
                <img class="add" :src="url7" v-show="url7" alt="">

            </div>
            <div style="text-align: center; margin-bottom: .4rem;">
                <img class="img" url="url4" :src="url4" alt="">
                <p>头往右倾一点</p>
                <input type="file" id="upload" url="url4" accept="image/*" @change="upload">
                <img class="add" :src="url8" v-show="url8" alt="">
            </div>

        </div>

        <!-- <div class="declare"></div> -->
        <div id="nextstep" @click="submit">
            下一步
        </div>

    </div>
</template>

<script>
    import { Picker } from 'vant';
    import { Toast, ImagePreview } from "vant"
    import { mapState, mapActions } from 'vuex'
    import { Step, Steps } from 'vant'
    import { Icon } from 'vant'
    import Exif from 'exif-js'
    export default {
        // 当前组件的名称
        name: 'home',

        data() {
            return {
                active: 0,
                img: "",
                input: "",
                headerImage: '', //base64码
                picValue: '',
                url: "https://wallet.95516.com/s/wl/webV3/activity/yhtzB/html/snsIndex.html?r=c31d969e469fb33f458a32dccc72096a&code=yhtzc2c",
                file: "", //文件
                filename: "", //判断是否走多度接口,
                base64: "",
                comm_id: "", //小区id
                option2: [],//小区列表
                buildingId: "",//楼栋id
                buildingIdList: "",//楼栋id列表
                columns1: [],//楼栋列表
                columns2: [],//单元列表
                unitIdList: [],//单元id列表
                unit_id: "",//单元id
                columns3: [],//房间列表
                rooms_id: "",
                roomsLsit: [],//房间id列表
                num1: "选择楼栋号",
                num2: "",
                num3: "",
                showPicker: false,
                job: "",
                option3: [
                    { text: '户主本人', value: "d" },
                    { text: '亲属', value: "e" },
                    { text: '租户', value: "f" }
                ],
                value3: "d",
                url1: require('../assets/img/img2/rentou.jpg'),
                url2: require('../assets/img/img2/rentou.jpg'),
                url3: require('../assets/img/img2/rentou.jpg'),
                url4: require('../assets/img/img2/rentou.jpg'),
                url5: require('../assets/img/add.png'),
                url6: require('../assets/img/add.png'),
                url7: require('../assets/img/add.png'),
                url8: require('../assets/img/add.png'),

                file1: null,
                file2: null,
                file3: null,
                file4: null,
                index: 200,
                city_name: "黄冈市",
                xq_id: null, //小区库名
                sf_dy_idList: null,
                sf_dy_id: ""


            }
        },

        // 在当前组件中添加其他的自定义组件
        components: {

        },

        /*
            在computed中添加mapState
            如果computed中只有一个辅助函数，后面可以直接写成函数名
        */
        computed: mapState(['token', 'idCard', 'userPhone', 'userid']), // this.token相当于this.$store.state.token

        methods: {
            // comm_id

            changeCommit() {
                const that = this
                this.xq_id = this.option2.filter(function (item) {
                    return item.value == that.comm_id
                })[0].xq_id
                console.log(this.xq_id)
                // console.log(data)
                this.num1 = "选择楼栋号";
                this.num2 = "",
                    this.num3 = "",
                    this.buildingId = "",
                    this.unit_id = "",
                    this.rooms_id = ""
            },
            submit() {
                const { comm_id, buildingId, unit_id, rooms_id, num1, num2, num3, job, option2, option3, value3, file1, file2, file3, file4, xq_id, sf_dy_id } = this
                let master_info;
                let file = [file1, file2, file3, file4]
                console.log(file)
                option3.forEach((item, index) => {
                    if (value3 == item.value) {
                        master_info = item.text
                    }
                })
                let comm_name;
                option2.forEach((item, index) => {
                    if (comm_id == item.value) {
                        comm_name = item.text
                    }
                })
                if (!comm_name || !master_info || !buildingId || !unit_id || !rooms_id || !file1 || !file2 || !file3 || !file4 || !job) {
                    Toast("请先填写好资料")
                    return
                }
                const formdata = new FormData()
                for (var i = 0; i < file.length; i++) {
                    formdata.append('file', file[i]);
                }
                formdata.append('user_id', this.userid);

                formdata.append('comm_id', comm_id);
                formdata.append('comm_name', comm_name);
                formdata.append('buil_name', num1);
                formdata.append('buil_id', buildingId);
                formdata.append('unit_name', num2);
                formdata.append('unit_id', unit_id);
                formdata.append('room_name', num3);
                formdata.append('room_id', rooms_id);
                formdata.append('master_info', master_info);
                formdata.append('work_units', job);
                formdata.append('xq_id', xq_id);
                formdata.append('phone', this.userPhone);
                formdata.append('sf_unit_id', this.sf_dy_id);
                console.log('小区id', comm_id, comm_name, num1, '楼栋id', buildingId, num2, '单元id', unit_id, num3, '房间id', rooms_id, master_info, job,'三方单元id',this.sf_dy_id)
                this.$axios.post("/comm/newaddbindroom", formdata,
                    {
                        headers: {
                            'Content-Type': 'multipart/form-data',
                            // "Content-Type":"application/json",
                            'token': this.token,
                        }
                    }
                ).then((res) => {
                    console.log(res)
                    if (res.status == 200 && res.data.code == 200) {
                        this.$router.push(
                            {
                                name: 'submit',
                                // params: {
                                //     username: phone
                                // }
                            }
                        )
                        Toast({
                            message: res.data.message, // 显示内容
                            duration: 1000 // 显示时间
                        })

                    } else {
                        this.$router.push(
                            {
                                name: 'home1',

                            }
                        )
                        Toast({
                            message: res.data.message, // 显示内容
                            duration: 2000 // 显示时间
                        })

                    }
                });
            },
            onConfirm(value, index) {

                Toast(`当前值：${value}, 当前索引：${index}`);
            },
            openshowPicker() {
                this.showPicker = true
                let comm_id = this.comm_id == true ? this.comm_id : 1
                this.$axios.get('/comm/getbuilding', {
                    params: {
                        comm_id: this.comm_id,
                        xq_id: this.xq_id

                    },
                }).then((res) => {
                    const { data, status } = res
                    console.log('楼栋编号', res)

                    if (status == 200) {
                        let obj1 = []
                        let obj2 = []

                        data.forEach((item, index, arr) => {
                            obj1.push(item.buildingName)
                            obj2.push(item.jz_id)
                        })
                        this.columns1 = obj1
                        this.buildingIdList = obj2
                        console.log(this.buildingIdList)
                        this.num1 = this.columns1[0]
                        this.buildingId = this.buildingIdList[0]
                        console.log("buildingId", this.buildingId)
                        this.$axios.get('/comm/getunit', {
                            params: {
                                jz_id: this.buildingId,
                                xq_id: this.xq_id
                            },
                        }).then((res) => {
                            console.log("单元", res)
                            if (res.status == 200) {
                                let arr = res.data;
                                let obj1 = []
                                let obj2 = []
                                let obj3 = []
                                arr.forEach((item, index, arr) => {
                                    obj1.push(item.dy_mc);
                                    obj2.push(item.dy_id);
                                    obj3.push(item.sf_dy_id);
                                })
                                this.columns2 = obj1;
                                this.unitIdList = obj2;
                                this.sf_dy_idList = obj3;
                                this.num2 = this.columns2[0]
                                this.unit_id = this.unitIdList[0]
                                this.sf_dy_id = this.sf_dy_idList[0]
                                this.getRoom()

                            } else {
                                console.log(res);
                            }
                        })

                    }
                })
            },
            getCommunity() { //小区接口
                this.$axios.get('/comm/getallcomm', {
                    params: {
                        // city_name: this.city_name,
                    }
                }).then((res) => {
                    console.log("小区接口", res)
                    if (res.status == 200) {
                        // alert("111小区接口")
                        let arr = res.data;
                        this.comm_id = arr[0].sf_xq_id;
                        this.xq_id = arr[0].xq_id
                        arr.forEach((item, index, arr) => {
                            const obj = {};
                            obj.text = item.xq_mc
                            obj.value = item.sf_xq_id,
                                obj.xq_id = item.xq_id
                            this.option2.push(obj)
                        })
                    } else {
                    }
                })
            },
            getRoom() { //门户号
                this.$axios.get('/comm/getroom', {
                    params: {
                        dy_id: this.unit_id,
                        xq_id: this.xq_id
                    }
                }).then((res) => {
                    console.log("门户", res)
                    if (res.status == 200) {
                        let arr = res.data;
                        let obj1 = []
                        let obj2 = []
                        arr.forEach((item, index, arr) => {
                            //             columns3: [],//房间列表
                            // rooms_id:"",
                            // roomsLsit:[],//房间id列表
                            obj1.push(item.zz_bm)
                            obj2.push(item.sf_zz_id)
                        })
                        this.columns3 = obj1
                        this.roomsLsit = obj2
                        this.rooms_id = this.roomsLsit[0]
                        console.log("this.rooms_id", this.rooms_id)
                        this.num3 = this.columns3[0]
                    } else {
                    }
                })
            },
            onConfirm(value) {
                this.value = value;
                this.showPicker = false;
            },
            onChange1(picker, value, index) {
                this.num1 = value;
                this.buildingId = this.buildingIdList[index]
                // 获取单元号
                this.$axios.get('/comm/getunit', {
                    params: {
                        jz_id: this.buildingId,
                        xq_id: this.xq_id
                    },
                }).then((res) => {
                    console.log("单元", res)
                    if (res.status == 200) {
                        let arr = res.data;
                        let obj1 = []
                        let obj2 = []
                        let obj3 = []
                        arr.forEach((item, index, arr) => {
                            obj1.push(item.dy_mc);
                            obj2.push(item.dy_id);
                            obj3.push(item.sf_dy_id)
                        })
                        this.columns2 = obj1;
                        this.unitIdList = obj2;
                        this.sf_dy_idList = obj3;
                        this.num2 = this.columns2[0]
                        this.unit_id = this.unitIdList[0]
                        this.sf_dy_id = this.sf_dy_idList[0]
                        this.getRoom()

                    } else {
                    }
                })
            },
            onChange2(picker, value, index) {
                this.num2 = value
                this.unit_id = this.unitIdList[index]
                this.getRoom()
            },
            onChange3(picker, value, index) {
                this.num3 = value
                this.rooms_id = this.roomsLsit[index]

            },
            // 图片预览
            goback() {
                this.$router.back()
            },


            upload(e) {
                // files为传进来的图片文件
                console.log(e)
                let url = e.target.attributes.url.nodeValue
                console.log(url)
                let files = e.target.files || e.dataTransfer.files;
                // console.log(files)
                if (!files.length) return;
                this.picValue = files[0];
                // console.log("picValue", this.picValue)
                var timestamp = Date.parse(new Date())
                this.filename = timestamp + this.picValue.name
                this.imgPreview(this.picValue, url);
            },
            imgPreview(file, url) {
                let self = this;
                let Orientation;
                //去获取拍照时的信息，解决拍出来的照片旋转问题
                Exif.getData(file, function () {
                    Orientation = Exif.getTag(this, 'Orientation');
                });
                // 看支持不支持FileReader
                if (!file || !window.FileReader) return;

                if (/^image/.test(file.type)) {
                    // 创建一个reader
                    let reader = new FileReader();
                    // 将图片2将转成 base64 格式
                    reader.readAsDataURL(file);
                    // 读取成功后的回调
                    reader.onloadend = function () {
                        let result = this.result;
                        let img = new Image();
                        self.base64 = result
                        img.src = result;
                        // console.log( "img",img.src)
                        //判断图片是否小于100K,是就直接上传，反之压缩图片
                        if (this.result.length <= (100 * 1024)) {
                            // console.log("没压缩了")
                            console.log(this.result)
                            if (url == "url1") {
                                self.url1 = this.result;
                                // console.log(self.url1)
                                function dataURLtoBlob(dataurl) {
                                    var arr = dataurl.split(','),
                                        mime = arr[0].match(/:(.*?);/)[1],
                                        bstr = atob(arr[1]),
                                        n = bstr.length,
                                        u8arr = new Uint8Array(n);
                                    while (n--) {
                                        u8arr[n] = bstr.charCodeAt(n);
                                    }
                                    return new Blob([u8arr], {
                                        type: mime
                                    });
                                }
                                console.log(dataURLtoBlob(self.url1))

                                self.file1 = self.dataURLtoFile(this.result, self.filename)
                                self.url5 = ""
                            } else if (url == "url2") {
                                self.url2 = this.result;
                                self.file2 = self.dataURLtoFile(this.result, self.filename)
                                self.url6 = ""
                                console.log(self.url2)
                            } else if (url == "url3") {
                                self.url3 = this.result;
                                self.file3 = self.dataURLtoFile(this.result, self.filename)
                                self.url7 = ""
                            } else {
                                self.url4 = this.result;
                                self.file4 = self.dataURLtoFile(this.result, self.filename)
                                self.url8 = ""
                            }

                            // console.log("base64", self.headerImage)


                            self.postImg();
                        } else {
                            // console.log("压缩了")
                            img.onload = function () {
                                let data = self.compress(img, Orientation);
                                console.log(data)
                                if (url == "url1") {
                                    self.url1 = data;
                                    function dataURLtoBlob(dataurl) {
                                        var arr = dataurl.split(','),
                                            mime = arr[0].match(/:(.*?);/)[1],
                                            bstr = atob(arr[1]),
                                            n = bstr.length,
                                            u8arr = new Uint8Array(n);
                                        while (n--) {
                                            u8arr[n] = bstr.charCodeAt(n);
                                        }
                                        return new Blob([u8arr], {
                                            type: mime
                                        });
                                    }
                                    console.log(dataURLtoBlob(self.url1))
                                    self.file1 = self.dataURLtoFile(data, self.filename)
                                    self.url5 = ""
                                } else if (url == "url2") {
                                    self.url2 = data;
                                    console.log(self.url2)
                                    self.file2 = self.dataURLtoFile(data, self.filename)
                                    self.url6 = ""
                                } else if (url == "url3") {
                                    self.url3 = data;
                                    self.file3 = self.dataURLtoFile(data, self.filename)
                                    self.url7 = ""
                                } else {
                                    self.url4 = data;
                                    self.file4 = self.dataURLtoFile(data, self.filename)
                                    self.url8 = ""
                                }
                                // console.log("base64", self.headerImage)


                                // console.log(data)
                                self.postImg();
                            }
                        }
                    }
                }
            },
            postImg() {
                //这里写接口
                // console.log("000")
            },
            rotateImg(img, direction, canvas) {
                //最小与最大旋转方向，图片旋转4次后回到原方向    
                const min_step = 0;
                const max_step = 3;
                if (img == null) return;
                //img的高度和宽度不能在img元素隐藏后获取，否则会出错    
                let height = img.height;
                let width = img.width;
                let step = 2;
                if (step == null) {
                    step = min_step;
                }
                if (direction == 'right') {
                    step++;
                    //旋转到原位置，即超过最大值    
                    step > max_step && (step = min_step);
                } else {
                    step--;
                    step < min_step && (step = max_step);
                }
                //旋转角度以弧度值为参数    
                let degree = step * 90 * Math.PI / 180;
                let ctx = canvas.getContext('2d');
                switch (step) {
                    case 0:
                        canvas.width = width;
                        canvas.height = height;
                        ctx.drawImage(img, 0, 0);
                        break;
                    case 1:
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(degree);
                        ctx.drawImage(img, 0, -height);
                        break;
                    case 2:
                        canvas.width = width;
                        canvas.height = height;
                        ctx.rotate(degree);
                        ctx.drawImage(img, -width, -height);
                        break;
                    case 3:
                        canvas.width = height;
                        canvas.height = width;
                        ctx.rotate(degree);
                        ctx.drawImage(img, -width, 0);
                        break;
                }
            },
            compress(img, Orientation) {
                let canvas = document.createElement("canvas");
                let ctx = canvas.getContext('2d');
                //瓦片canvas
                let tCanvas = document.createElement("canvas");
                let tctx = tCanvas.getContext("2d");
                let initSize = img.src.length;
                let width = img.width;
                let height = img.height;
                //如果图片大于四百万像素，计算压缩比并将大小压至400万以下
                let ratio;
                if ((ratio = width * height / 4000000) > 1) {
                    // console.log("大于400万像素")
                    ratio = Math.sqrt(ratio);
                    width /= ratio;
                    height /= ratio;
                } else {
                    ratio = 1;
                }
                canvas.width = width;
                canvas.height = height;
                //        铺底色
                ctx.fillStyle = "#fff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                //如果图片像素大于100万则使用瓦片绘制
                let count;
                if ((count = width * height / 1000000) > 1) {
                    // console.log("超过100W像素");
                    count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
                    //            计算每块瓦片的宽和高
                    let nw = ~~(width / count);
                    let nh = ~~(height / count);
                    tCanvas.width = nw;
                    tCanvas.height = nh;
                    for (let i = 0; i < count; i++) {
                        for (let j = 0; j < count; j++) {
                            tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
                            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
                        }
                    }
                } else {
                    ctx.drawImage(img, 0, 0, width, height);
                }
                //修复ios上传图片的时候 被旋转的问题
                if (Orientation != "" && Orientation != 1) {
                    switch (Orientation) {
                        case 6://需要顺时针（向左）90度旋转
                            this.rotateImg(img, 'left', canvas);
                            break;
                        case 8://需要逆时针（向右）90度旋转
                            this.rotateImg(img, 'right', canvas);
                            break;
                        case 3://需要180度旋转
                            this.rotateImg(img, 'right', canvas);//转两次
                            this.rotateImg(img, 'right', canvas);
                            break;
                    }
                }
                //进行最小压缩
                let ndata = canvas.toDataURL('image/jpeg', 0.1);
                // console.log('压缩前：' + initSize);
                // console.log('压缩后：' + ndata.length);
                // console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
                tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
                // console.log(ndata)

                return ndata;

            },
            dataURLtoFile(dataurl, filename) {//将base64转换为文件
                var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                while (n--) {
                    u8arr[n] = bstr.charCodeAt(n);
                }
                return new File([u8arr], filename, { type: mime });
            }

        },
        // 生命周期函数,创建实例,可以获取this,但DOM节点还没有创建出来
        created() {
        },
        // 生命周期函数,当前组件上的所有DOM节点都已经创建出来
        mounted() {
            this.isDuodu = this.$route.params.isDuodu
            this.comm_id = this.$route.params.comm_id
            console.log("comm_id", this.comm_id, "多度", this.isDuodu)
            this.getCommunity()
        },
        // 生命周期函数,当数据发生改变并且导致视图发生相应的改变
        updated() {
            // console.log('updated')
        },
        // 生命周期函数,组件被销毁
        destroyed() {
            console.log("组件销毁", 666)
            console.log('destroyed')
        },

        // 生命周期函数,离开缓存组件
        deactivated() {
            console.log('deactivated')

            // 不要尝试去获取页面的scrollTop,因为页面只有一个,跳转到新的路由,页面的scrollTop会变成0
            // 所以,在离开的时候,把当前组件的scrollTop保存下来,赋给一个新的变量
            // this.cache_scrollTop = this.scrollTop
        },
        // 离开路由之前,它会在deactivated之前调用
        beforeRouteLeave(to, from, next) {
            console.log('beforeRouteLeave')

            this.username = "",
                // this.idCard = "",
                this.img = "",
                this.headerImage = '',
                next()
        }
    }
</script>

<!-- 添加scoped属性,将样式的作用域限制在当前组件内,不会影响子组件 -->
<style lang="scss" scoped>
    .phoneKey {
        padding: 50px 0;
    }

    img {
        vertical-align: top;
    }

    .top {
        position: fixed;
        color: white;
        top: 0;
        height: 40px;
        line-height: 40px;
        /* position: relative; */
        font-size: 16px;
        border-bottom: 1px solid #999;
        width: 100%;
        background-color: #4b77e4;
        z-index: 9999;
    }

    .top div {
        text-align: center;

    }

    .van-icon-arrow-left {
        position: absolute;
        top: 10px;
    }

    .xiala {
        width: 100%;
        display: flex;
        align-items: center;
        font-size: 12px;

        .left {
            width: 20%;
            border-right: 1px solid #ccc;
            text-align: center;

        }

        .right {
            flex: 1;
            line-height: 40px;
        }

        .van-dropdown-menu {
            flex: 1;
            height: 40px;
        }

        .van-cell {
            flex: 1;
            height: 40px;

        }

    }

    .num {
        font-size: .5rem;
        height: .8rem;
        width: .8rem;
        border: 1px solid #666;
        border-radius: 50%;
        text-align: center;
        line-height: .8rem;
        margin: 0 auto;
    }

    .van-step__title {
        margin-bottom: 180px !important;
    }

    .face {
        margin-top: .4rem;
    }

    .info,
    .face {
        margin-left: .2rem;
    }

    .declare {
        text-align: center;
        background-color: #4b77e4;
        color: aliceblue;
        margin-top: .3rem;
        font-size: .28rem;
        height: 1px;
        line-height: .5rem;
    }

    .imgbox {
        width: 55%;
        height: 4.5rem;
        background-image: url("../assets/img/img2/rentou.jpg");
        background-size: 100% 100%;
        margin: .5rem auto 0;
    }

    .imgbox img {
        width: 100%;
        height: 100%;
    }

    #takepicture {
        width: 1.5rem;
        height: .7rem;
        line-height: .7rem;
        border-radius: 4px;
        background-color: #4b77e4;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: center;
        font-family: Microsoft Yahei;
        border: 1px solid rgba(187, 187, 187, 1);
        margin: .2rem auto;
        max-width: 100px;
        max-height: 50px;
        position: relative;
    }

    #nextstep {

        width: 100%;
        height: 51px;
        border-radius: 4px;
        line-height: 51px;
        background-color: #4b77e4;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: center;
        font-family: Microsoft Yahei;
        border: 1px solid rgba(187, 187, 187, 1);
        position: fixed;
        bottom: 0;
        z-index: 2;
    }

    #upload {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 100;
        opacity: 0;
    }

    .xuanze {
        display: flex;

        .van-picker {
            width: 33.33%;
        }

    }

    .text {
        margin-top: .2rem;
        margin-left: .2rem;
        color: #4b77e4;
    }

    .idcard {
        display: flex;
        justify-content: space-around;
        margin: .2rem 0;
        flex-flow: wrap;
        text-align: center;

        div {
            width: 45%;
            position: relative;
            height: 2.5rem;
            margin-bottom: .5rem;

            p {
                margin-bottom: .2rem;
            }

            .img {
                width: 100%;
                height: 100%;
                max-height: 100%;
                border-radius: 8px;
            }

            .add {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                z-index: 1;
            }
        }

    }

    .van-field__control {
        text-align: center !important;
    }

    #nextstep {

        width: 100%;
        height: 40px;
        border-radius: 4px;
        line-height: 40px;
        background-color: #4b77e4;
        color: rgba(255, 255, 255, 1);
        font-size: 20px;
        text-align: center;
        font-family: Microsoft Yahei;
        border: 1px solid rgba(187, 187, 187, 1);
        position: fixed;
        bottom: 0;
        z-index: 2;
    }
</style>